<template>
  <section class="intelligent-content-bg overflowYAll">
    <div class="intelligent-content-box">
      <!-- <el-form :inline="true">
        <el-form-item>
          <el-select v-model="selectedType" @change="selectType()" placeholder="请选择类型">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form> -->
      <!-- 总量统计表 -->
      <el-table
        :data="totalTable"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#cae4fe',color: '#000'}"
        :cell-style="{border:'none'}"
      >
        <el-table-column prop="serviceAllCount" label="共享种类总数" align="center"></el-table-column>
        <el-table-column prop="orgAllCount" label="共享单位总数" align="center"></el-table-column>
        <el-table-column prop="allCount" label="共享总量" align="center"></el-table-column>
        <el-table-column prop="serviceThisMonthCount" label="本月共享种类数" align="center"></el-table-column>
        <el-table-column prop="orgThisMonthCount" label="本月共享单位数" align="center"></el-table-column>
        <el-table-column prop="thisMonthCount" label="本月共享数据量" align="center"></el-table-column>
        <el-table-column prop="thisWeekCount" label="本周共享数据量" align="center"></el-table-column>
        <el-table-column prop="todayCount" label="本日共享数据量" align="center"></el-table-column>
      </el-table>
      <hr>
      <!-- 图标组件 -->
      <div>
        <statistical-table-share :columnName='columnName' :columnData='columnData'></statistical-table-share>
      </div>
      <!-- 统计详细表 -->
      <el-table
        v-if="selectedType === 'requester'"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#cae4fe',color: '#000'}"
        :cell-style="{border:'none'}"
      >
        <el-table-column prop="name" label="请求方" align="center"></el-table-column>
        <el-table-column prop="orgName" label="所属部门" align="center"></el-table-column>
        <el-table-column prop="allCount" label="总调用次数" align="center"></el-table-column>
        <el-table-column prop="thisMonthCount" label="本月调用" align="center"></el-table-column>
        <el-table-column prop="thisWeekCount" label="本周调用" align="center"></el-table-column>
        <el-table-column prop="todayCount" label="本日调用" align="center"></el-table-column>
      </el-table>
      <!-- 服务方统计表 -->
      <el-table
        v-if="selectedType === 'server'"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#cae4fe',color: '#000'}"
        :cell-style="{border:'none'}"
      >
        <el-table-column prop="name" label="服务方" align="center"></el-table-column>
        <el-table-column prop="orgName" label="所属部门" align="center"></el-table-column>
        <el-table-column prop="allCount" label="总共享次数" align="center"></el-table-column>
        <el-table-column prop="thisMonthCount" label="本月共享" align="center"></el-table-column>
        <el-table-column prop="thisWeekCount" label="本周共享" align="center"></el-table-column>
        <el-table-column prop="todayCount" label="本日共享" align="center"></el-table-column>
      </el-table>
      <p style="margin-top: 15px;">
        <el-pagination
          :total="pageTotal"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="10"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </p>
    </div>
  </section>
</template>

<script>
import statisticalTableShare from "../components/statisticalTableShare.vue";
import {
  shareRequestStatisticsDetailController,
  shareServiceStatisticsTotalController,
  shareServiceStatisticsDetailController,
  shareDataForEchartsController
} from "../css_js_img/statisticalMonitotingController";
export default {
  components: {
    statisticalTableShare
  },
  data() {
    return {
      tableData: [], //类型列表
      totalTable: [], // 总数表的数据
      columnName:[],
      columnData:[],
      typeList: [
        {
          value: "requester",
          label: "请求方"
        },
        {
          value: "server",
          label: "服务方"
        }
      ],
      selectedType: "server",
      pageNum: 1,
      pageTotal: 10
    };
  },
  mounted() {
    console.log("初始化执行.....");
     shareServiceStatisticsDetailController(this);    
    // 初始化总量统计表
    shareServiceStatisticsTotalController(this);

     // 初始化图表信息
    shareDataForEchartsController(this);
  },
  methods: {
    selectType() {
      this.pageNum = 1;
      if (this.selectedType === "requester") {
        // console.log("选择的是：" + this.selectedType);
        shareRequestStatisticsDetailController(this, this.pageNum);
      } else {
        // console.log("选择的是：" + this.selectedType);
        shareServiceStatisticsDetailController(this, this.pageNum);
      }
    },
    handleCurrentChange(param) {
      if (this.selectedType === "requester") {
        this.pageNum = param;
        // console.log("请求方统计翻到"+param+"页" + this.pageNum);
        shareRequestStatisticsDetailController(this, this.pageNum);
      } else {
        this.pageNum = param;
        // console.log("服务方统计翻到"+param+"页" + this.pageNum);
        shareServiceStatisticsDetailController(this, this.pageNum);
      }
    }
  }
};
</script>
